<!-- 案件查找页面 -->
<template>
	<view style="min-height: 100vh; background-color: #F0EFF4;">
		<!-- 顶部的搜索框:自动获得焦点效果在真机上是有的 -->
		<u-sticky>
			<view class="search-box" style="width: 750rpx; background-color: #F0EFF4;">
				<u-search
					placeholder="输入任意关键字搜索"
					shape="square"
					:focus="true"
					bg-color="#FFF"
					v-model="keyword"
					margin="20rpx"
					:show-action="false"
					input-align="left"
					@change="searchChange"
				></u-search>
			</view>
		</u-sticky>
		<view class="tip-box">共搜索到<text style="color: #00C9B1;">{{caseNumber}}</text>个案例，数据持续更新中...</view>
		<block v-for="caseItem in caseDataList" :key="caseItem.id">
			<view class="case-item-box" @click="caseItemClick(caseItem.id)">
				<view class="case-type">{{caseItem.case_type}}</view>
				<view class="case-title">{{caseItem.case_title}}</view>
				<view class="case-firm">{{caseItem.case_firm}} | {{caseItem.case_order}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				isInput: false, // 节流阀，false 为默认关闭节流阀的状态
				// 案件数量
				caseNumber: 0,
				caseDataList: [{
					id: 1,
					case_type: '民事案件',
					case_title: '上海海基不锈钢材料有限公司与上海飞鸿自动化设备有限公司买卖合同纠纷一审民事判决书',
					case_firm: '上海市浦东新区人民法院',
					case_order: '（2013）浦民二（商）初字第2614号'
				},{
					id: 2,
					case_type: '刑事案件',
					case_title: '上海海基不锈钢材料有限公司与上海飞鸿自动化设备有限公司买卖合同纠纷一审民事判决书',
					case_firm: '上海市浦东新区人民法院',
					case_order: '（2013）浦民二（商）初字第2614号'
				}]
			};
		},
		onLoad() {
			this.caseNumber = this.caseDataList.length
		},
		methods: {
			// 搜索框内容发生变化时触发
			searchChange() {
				// 判断节流阀的状态,为 true 则 return 出去
				if (this.isInput) return;
				this.isInput = true;
				setTimeout(() => {
					console.log(this.keyword);
					// TODO:在此处理后续搜索业务逻辑，比如发起网络请求
					
					
					this.isInput = false;
				}, 1000);
			},
			// 监听每一个案例的点击事件
			caseItemClick(id) {
				this.$u.route({
					type: 'to',
					url: '/myPackageA/pages/views/case-detail',
					params: {id: id}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding: 1rpx 15rpx;
	}
	.tip-box {
		line-height: 52rpx;
		font-size: 24rpx;
		color: #909399;
		padding: 0 22rpx;
	}
	.case-item-box {
		margin-top: 15rpx;
		background-color: white;
		padding: 0 22rpx;
		.case-type {
			line-height: 82rpx;
			border-bottom: 1rpx solid #dddddd;
			font-size: 30rpx;
			color: #141418;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.case-title {
			margin: 27rpx 0;
			font-size: 30rpx;
			color: #141418;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.case-firm {
			font-size: 26rpx;
			color: #999999;
			padding-bottom: 27rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}
</style>
